<template>
	<view class="rater-box">
		<view class="rater-box-l">loving</view>
		<view class="rater-box-r">
			<view 
				class="box-r-item"  
				:class="{ 'active': index <= active }"
				@click="changeActive(index)" 
				v-for="index in max" 
				:key="index"
			></view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const max = ref(5);
const active = ref(0);
const changeActive = (index) => {
	if(active.value == index){
		active.value = index - 1;
	}else{
		active.value = index;
	}
}

</script>

<style lang="scss">
.rater-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #ccc;
	.rater-box-r {
		display: flex;
		gap: 20rpx;
		.box-r-item {
			background-image: url('./sun.png');
			width: 40rpx;
			height: 40rpx;
			background-size: 100% 100%;
			&.active {
				background-image: url('./sun-active.png');
			}
		}
	}
}
</style>